<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../js/lay-module/echarts/echarts.js"></script>
    <script type="text/javascript" src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <style>
        .layui-table-cell {
            height: 60px;
            line-height: 60px;
        }
        /* height: auto !important;
          white-space: normal;
          padding: 0px;
      } */

        th .layui-table-cell {
            height: 30px;
            line-height: 30px;
        }

        th .laytable-cell-1-0-7 {
            height: 30px;
            line-height: 30px;
        }

        .layui-table img {
            width: 100px;
            height: 60px;
        }
    </style>

</head>
<body>
        <div id="main" style="width: 50%;height:400px;"></div>

        <script>
            var myChart = echarts.init(document.getElementById('main'));
            $.ajax({
                "url": "http://localhost:8080/finance/departmentPie",
                "data": {},
                "success": function (result) {
                    console.log(result.data.departmentPie)
                    option = {
                        title: {
                            text: '支出',
                            subtext: '部门员工工资',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            left: 'center',
                            top: 'bottom',
                            data: result.data.departmentPie
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: { show: true },
                                dataView: { show: true, readOnly: false },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        series: [
                            {
                                name: '支出',
                                type: 'pie',
                                radius: [20, 70],
                                center: ['30%', '50%'],
                                roseType: 'radius',
                                itemStyle: {
                                    borderRadius: 8
                                },
                                label: {
                                    show: false
                                },
                                emphasis: {
                                    label: {
                                        show: true
                                    }
                                },
                                data: result.data.departmentPie
                            },
                            {
                                name: '部门工资支出',
                                type: 'pie',
                                radius: [20, 100],
                                center: ['60%', '50%'],
                                roseType: 'area',
                                itemStyle: {
                                    borderRadius: 8
                                },
                                data: result.data.departmentPie
                            
                            }
                        ]
                    };
    
                    myChart.setOption(option);
                },
                "dataType": "json"
            });
        </script>

</body>
</html>